<template>
    <ul class="overall-list">
        <router-link tag="li" :to="'/songList/' + item.id + '?type=songList'" v-for="item in topList" :key="item.id">
            <div class="img-box">
                <img :src="item.coverImgUrl" alt/>
            </div>
            <ul class="song-list">
                <li v-for="song_item in item.tracks" :key="song_item.first">
                    {{song_item.first + ' - ' + song_item.second}}
                </li>
            </ul>
        </router-link>
    </ul>
</template>
<script>
import {getrank} from '@/api'

export default {
    data(){
        return {
            summary: []
        }
    },
    computed:{
        topList(){
            return this.summary.filter((elem, index)=>{
                return index <= 3
            })
        }
    },
    mounted(){
        getrank().then((res)=>{
            this.summary = res.data.list;
        })
    }
};
</script>
<style lang="less" scoped>
.overall-list > li {
    display: flex;
    margin: 5px 10px;
    height: 100px;
    border-bottom: 1px solid #e4e4e4;
    .img-box {
        flex: 0 0 100px;
        width: 100px;
        height: 100px;
    }
    .song-list {
        flex: 1;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 0 20px;
        height: 100px;
        overflow: hidden;
        color: #2e3030;
        font-size: 12px;
        > li {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            line-height: 30px;
            text-align: left;
        }
    }
}
</style>